import React, {Component} from 'react';
import {
	AppRegistry,
	Platform,
	StyleSheet,
	Image,
	Text,
	View,
	TextInput,
	PixelRatio,
	FlatList,
	ActivityIndicator,
	TouchableOpacity
} from 'react-native';

var Common = require('./common');
var num = 1;//分页
const pixelRatio = PixelRatio.get();
const dismissKeyboard = require('dismissKeyboard');
export default class NewsPage extends Component {
	// 此处设置 Tab 的名称和一些样式，这里的会覆盖掉配置路由文件的样式，下面会讲
	static navigationOptions = {
		headerTitle: '资讯',
		tabBarLabel: '资讯',
		tabBarIcon: ({focused}) => {
			if (focused) {
				return (
					<Image style={{height: 30, width: 30}}
					       source={require('./images/zixun1.png')}/>
				);
			}
			return (
				<Image style={{height: 30, width: 30}}
				       source={require('./images/zixun.png')}/>
			);
		},
	};

	constructor(props) {
		super(props);
		this.state = {
			str: '推荐',
			news: [],
			imgsrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1514356844477&di=7c57fde0860194258cbec5c2720e0cf5&imgtype=0&src=http%3A%2F%2Fwww.swkweike.com%2Fdata%2Fuploads%2F2015%2F05%2F26%2F20430804665564348adc669.png',
			refreshing: false,//下拉刷新
			hasMore: true,//是否有更多数据
			endText: '加载更多...',
			orderby: 'recommend'
		};
	}

	login() {
		var _this = this;
		Common.ajaxPost(Common.url + 'login.php', function (res) {
			if (res.code == "0000") {

			}
		}.bind(this), {verify: '08login', t: ''});
	}

	toRegister() {
		this.props.navigation.navigate('Register')
	}

	toDetail(aid) {
		this.props.navigation.navigate('NewsDetail', aid)
	}

	toSearch() {
		this.props.navigation.navigate('Search')
	}

	renderNews(data) {
		console.log('renderNews', data);
		var _this = this;
		if (data != undefined) {
			return (
				<TouchableOpacity key={data.item.aid} style={styles.newsItem} onPress={_this.toDetail.bind(_this, data.item.aid)}>
					<View style={{flex: 1}}>
						<Text style={styles.newsTitle}>{data.item.subject}</Text>
						<View style={styles.newsTips}>
							<Text style={styles.newsTipsMark}>{data.item.categoryname}</Text>
							<Text style={styles.newsTipsText}>{Common.timeago(data.item.createdate)}</Text>
						</View>
					</View>
					<View style={{width: 120, height: 70,}} source={data.item.thumb == '' ? Common.url + data.item.thumb : require('./images/banner.png')}/>
				</TouchableOpacity>

			);
		} else {
			return (
				<Text>空</Text>
			)
		}
	}

	keyExtractor = (item, index) => item.aid + '';//生成key
	refresh() {
		num = 1;
		this.setState({
			refreshing: true
		})
		this.getData();
	}

	loadMore() {
		console.log('loadMore');
		num++;

		console.log('hasMore', this.state.hasMore);
		if (this.state.hasMore) {
			this.getData();
		}
		else{
			this.setState({
				endText: '无更多数据'
			})
		}
	}

	renderFooter() {
		console.log('renderFooter');
		if(this.state.refreshing){
			return (
				<View style={{padding: 20}}>
					<ActivityIndicator/>
					<Text style={{textAlign: 'center'}}>{this.state.endText}</Text>
				</View>
			)
		}
		else{
			return (
				<View></View>
			)
		}
	}

	changeTabs(str) {
		this.setState({
			str: str
		})
		num = 1;
		if(str == '推荐'){
			this.setState({
				orderby: 'recommend',
				news: [],
				refreshing: true
			},()=>{
				this.getData();
			})
		}
		else if(str == '最新'){
			this.setState({
				orderby: 'new',
				news: [],
				refreshing: true
			},()=>{
				console.log(this.state.news);
				this.getData();
			})
		}
		else{
			this.setState({
				orderby: 'hot',
				news: [],
				refreshing: true
			},()=>{
				this.getData();
			})
		}
	}

	getData() {
		var _this = this;

		Common.ajaxGet(Common.url + 'article.php?action=articlelist&caid=7&page=' + num + '&pagesize=10&orderby=' + this.state.orderby, function (res) {
			console.log(res)
			if (res.code == 1) {
				var data = res.data;
				if (data.list && data.list.length) {
					this.setState({
						news: this.state.news.concat(data.list),
						refreshing: true,
						hasMore: true,
					})

				} else {
					this.setState({
						hasMore: false,
						refreshing: false,
					})
					console.log('hasMore', this.state.hasMore);
				}
			}
		}.bind(this), {verify: '08login', t: ''});
	}

	componentDidMount() {
		num = 1;
		this.getData();
		// console.log(this.props.navigation.state.params)
		// if(this.props.navigation.state.params.from){
		//   this.setState({
		//     from:this.props.navigation.state.params,
		//   })
		// }
	}

	render() {
		const {navigate} = this.props.navigation;
		return (
			<View style={styles.container}>
				<View style={styles.logo}>
					<TouchableOpacity style={styles.fakeInput} activeOpacity={1} onPress={this.toSearch.bind(this)}>
						<Image style={{width: 15, height: 15, marginRight: 10, marginLeft: 10}}
						       source={require('./images/sousuo.png')}/>
						<Text style={{color: '#fff'}}>奥迪</Text>
					</TouchableOpacity>
				</View>
				<View style={styles.tabs}>
					<TouchableOpacity style={styles.tabsItem} onPress={this.changeTabs.bind(this, '推荐')}>
						<Text style={[styles.tabsText, {
							fontWeight: this.state.str == '推荐' ? 'bold' : 'normal',
							fontSize: this.state.str == '推荐' ? 20 : 18
						}]}>推荐</Text>
						<View
							style={[styles.line, {backgroundColor: this.state.str == '推荐' ? '#3c78ff' : '#fff'}]}></View>
					</TouchableOpacity>
					<TouchableOpacity style={styles.tabsItem} onPress={this.changeTabs.bind(this, '最新')}>
						<Text style={[styles.tabsText, {
							fontWeight: this.state.str == '最新' ? 'bold' : 'normal',
							fontSize: this.state.str == '最新' ? 20 : 18
						}]}>最新</Text>
						<View
							style={[styles.line, {backgroundColor: this.state.str == '最新' ? '#3c78ff' : '#fff'}]}></View>
					</TouchableOpacity>
					<TouchableOpacity style={styles.tabsItem} onPress={this.changeTabs.bind(this, '进口')}>
						<Text style={[styles.tabsText, {
							fontWeight: this.state.str == '进口' ? 'bold' : 'normal',
							fontSize: this.state.str == '进口' ? 20 : 18
						}]}>进口</Text>
						<View
							style={[styles.line, {backgroundColor: this.state.str == '进口' ? '#3c78ff' : '#fff'}]}></View>
					</TouchableOpacity>
				</View>
				{this.state.news.length ? (
					<FlatList
						ListFooterComponent={this.renderFooter.bind(this)}
						renderItem={this.renderNews.bind(this)}
						data={this.state.news}
						onEndReachedThreshold={0.2}
						onEndReached={this.loadMore.bind(this)}
						onRefresh={this.refresh.bind(this)}
						refreshing={this.state.refreshing}
						keyExtractor={this.keyExtractor.bind(this)}
						style={{height: Common.screenHeight - 150}}
					/>
				) : (
					<View
						style={{alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff', marginTop: 5}}>
						<Text style={[{
							padding: 20,
							width: Common.screenWidth,
							textAlign: 'center',
							fontSize: 16,
							color: '#333'
						}]}>无数据</Text>
					</View>
				)}

			</View>
		);
	}
}

const styles = StyleSheet.create({
	container: {
		height: Common.screenHeight,
		backgroundColor: '#fff',
	},
	logo: {
		height: 45,
		width: Common.screenWidth,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center',
		backgroundColor: '#3c78ff'
	},
	fakeInput: {
		width: Common.screenWidth * 0.7,
		height: 25,
		backgroundColor: '#86abfd',
		borderRadius: 12,
		flexDirection: 'row',
		alignItems: 'center',
	},
	tabs: {
		flexDirection: 'row',
		alignItems: 'flex-end',
		justifyContent: 'center',
		paddingTop: 25,
		marginLeft: 20,
		marginRight: 20,
		borderBottomColor: '#e9e9e9',
		borderBottomWidth: 1,
	},
	tabsItem: {
		flexDirection: 'column',
		justifyContent: 'center',
		alignItems: 'center',
		paddingLeft: 15,
		paddingRight: 15,
	},
	line: {
		width: 16,
		height: 3,
		marginTop: 3,
	},
	newsItem: {
		flexDirection: 'row',
		justifyContent: 'center',
		marginLeft: 20,
		marginRight: 20,
		paddingTop: 10,
		paddingBottom: 10,
		borderBottomColor: '#e9e9e9',
		borderBottomWidth: 1,
	},
	newsTitle: {
		fontSize: 16,
		lineHeight: 20,
		height: 40,
	},
	newsTips: {
		flexDirection: 'row',
		alignItems: 'center',
		paddingTop: 10,
	},
	newsTipsMark: {
		marginRight: 10,
		backgroundColor: '#f5f7fa',
		padding: 3,
		color: '#a8a8a8'
	},
	newsTipsText: {
		color: '#a8a8a8'
	},
});
